<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="题目名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入题目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="教师姓名" prop="teacherName">
        <el-input
          v-model="queryParams.teacherName"
          placeholder="请输入教师姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
          <el-option label="待审核" value="待审核" />
          <el-option label="修改待审核" value="修改待审核" />
          <el-option label="已通过" value="已通过" />
          <el-option label="已拒绝" value="已拒绝" />
        </el-select>
      </el-form-item>
      <el-form-item label="难度等级" prop="difficulty">
        <el-select v-model="queryParams.difficulty" placeholder="请选择难度等级" clearable>
          <el-option label="简单" value="简单" />
          <el-option label="中等" value="中等" />
          <el-option label="困难" value="困难" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="multiple"
          @click="handleBatchApprove"
        >批量通过</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="topicList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
      <el-table-column label="题目ID" align="center" prop="topicId" width="80" />
      <el-table-column label="题目名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="180" />
      <el-table-column label="教师姓名" align="center" prop="teacherName" width="100" />
      <el-table-column label="难度等级" align="center" prop="difficulty" width="100">
        <template slot-scope="scope">
          <el-tag :type="getDifficultyType(scope.row.difficulty)" size="small">{{ scope.row.difficulty }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最大名额" align="center" prop="maxStudents" width="100" />
      <el-table-column label="审核状态" align="center" prop="auditStatus" width="120">
        <template slot-scope="scope">
          <el-tag :type="getAuditStatusType(scope.row.auditStatus)" size="small">{{ scope.row.auditStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.auditStatus === '待审核' || scope.row.auditStatus === '修改待审核'"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            v-if="scope.row.auditStatus === '待审核' || scope.row.auditStatus === '修改待审核'"
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleApprove(scope.row)"
          >通过</el-button>
          <el-button
            v-if="scope.row.auditStatus === '待审核' || scope.row.auditStatus === '修改待审核'"
            size="mini"
            type="text"
            icon="el-icon-close"
            @click="handleReject(scope.row)"
          >拒绝</el-button>
          <el-button
            v-if="scope.row.auditStatus !== '待审核' && scope.row.auditStatus !== '修改待审核'"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 题目详情对话框 -->
    <topic-detail ref="topicDetail" />
    
    <!-- 拒绝对话框 -->
    <reject-dialog ref="rejectDialog" @success="getList" />
  </div>
</template>

<script>
import { listAllTopic, approveTopic } from "@/api/system/topic";
import TopicDetail from "./TopicDetail";
import RejectDialog from "./RejectDialog";

export default {
  name: "AdminTopic",
  components: {
    TopicDetail,
    RejectDialog
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 题目表格数据
      topicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        teacherName: null,
        auditStatus: null,
        difficulty: null
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询题目列表 */
    getList() {
      this.loading = true;
      listAllTopic(this.queryParams).then(response => {
        this.topicList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.topicId);
      this.multiple = !selection.length;
    },
    /** 判断行是否可选择（只有待审核和修改待审核的可以批量操作） */
    checkSelectable(row) {
      return row.auditStatus === '待审核' || row.auditStatus === '修改待审核';
    },
    /** 查看详情 */
    handleView(row) {
      this.$refs.topicDetail.openDialog(row);
    },
    /** 通过审批 */
    handleApprove(row) {
      const statusText = row.auditStatus === '修改待审核' ? '修改申请' : '审核';
      this.$modal.confirm(`是否确认通过题目"${row.title}"的${statusText}？`).then(() => {
        return approveTopic(row.topicId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("审批通过成功");
      }).catch(() => {});
    },
    /** 拒绝审批 */
    handleReject(row) {
      const isModification = row.auditStatus === '修改待审核';
      this.$refs.rejectDialog.openDialog(row.topicId, isModification);
    },
    /** 批量通过审批 */
    handleBatchApprove() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning("请至少选择一条记录");
        return;
      }
      this.$modal.confirm('是否确认批量通过选中的题目审核？').then(() => {
        const promises = this.ids.map(id => approveTopic(id));
        return Promise.all(promises);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("批量审批通过成功");
      }).catch(() => {});
    },
    /** 难度等级标签类型 */
    getDifficultyType(difficulty) {
      const map = {
        '简单': 'success',
        '中等': '',
        '困难': 'danger'
      };
      return map[difficulty] || 'info';
    },
    /** 审核状态标签类型 */
    getAuditStatusType(auditStatus) {
      const map = {
        '待审核': 'warning',
        '修改待审核': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger'
      };
      return map[auditStatus] || 'info';
    }
  }
};
</script>